<template>
  <image :src="prefixURL(shopInfo.image)" class="banner-img" mode=""></image>
  <view class="shop-content">
    <view class="shop-price">{{shopInfo.gold}}积分</view>
    <view>{{shopInfo.name}}</view>
  </view>
  <view class="u-text-center u-m-t-20 u-m-b-20 " style="position: relative;">
    <image src="@/static/images/04_29fg.png" class="title-img" mode=""></image>
    <up-text text="商品详情" color="#666" align="center" size="14"></up-text>
  </view>
  <view class="u-p-l-20 u-p-r-20">
    <u-parse :content="shopInfo.content"></u-parse>
  </view>
  <image :src="prefixURL(item)" v-for="(item ,index) in shopInfo.images" :key="index" class="detail-img"
    mode="widthFix"></image>
  <view class="action-bar">
    <up-button type="warning" shape="circle" color="#F87610" @click="handleUse">立即兑换</up-button>
  </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import { productDetail } from '../../../config/api';
  import { prefixURL } from '../../../util/util';
  const props = defineProps({
    id: {
      type: [String, Number],
      default: ''
    }
  })
  const shopInfo = ref({})
  onMounted(() => {
    _productDetail()
  })
  // 商品详情
  const _productDetail = () => {
    productDetail({ id: props.id }).then(res => {
      shopInfo.value = res.data
    })
  }
  const handleUse = () => {
    uni.$u.route(`/pages/index/integralShop/createOrder?id=${props.id}`)
  }
</script>

<style lang="scss" scoped>
  .banner-img {
    width: 100%;
    height: 500rpx;
    display: block;
  }

  .shop-content {
    padding: 20rpx;
    border-radius: 20rpx;
    background: #fff;
    font-size: 30rpx;
    font-weight: 800;
    color: #000;
    margin: 20rpx;
    margin-top: -40rpx;

    .shop-price {
      font-size: 40rpx;
      font-weight: 500;
      color: #ea0000;
      margin-bottom: 20rpx;
    }
  }

  .title-img {
    width: 460rpx;
    height: 6rpx;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
  }

  .detail-img {
    width: 710rpx;
    display: block;
    margin: auto;
    border-radius: 20rpx;
  }

  .action-bar {
    padding: 20rpx;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 16rpx solid #f8f8f8;
    z-index: 9;

  }
</style>